<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>综合管理平台</title>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<link rel="stylesheet" href="styles.css">
		<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
		<style>
			/* 自定义浅色背景 */
			.custom-bg {
				background-color: #f8f9fa;
				padding: 20px;
				border-radius: 12px;
				box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
			}

			/* 字体优化 */
			body {
				font-family: 'Roboto', sans-serif;
				font-weight: 400;
				line-height: 1.6;
			}

			h1,
			h2,
			h3,
			h4,
			h5,
			h6 {
				font-weight: 500;
			}

			/* 按钮样式 */
			.btn {
				border-radius: 8px;
				transition: all 0.3s ease;
			}

			.btn:hover {
				transform: translateY(-2px);
				box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
			}

			/* 输入框样式 */
			.form-control {
				border-radius: 8px;
				border: 1px solid #ced4da;
				transition: all 0.3s ease;
			}

			.form-control:focus {
				border-color: #80bdff;
				box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
			}

			/* 表格样式 */
			.table {
				border-radius: 12px;
				overflow: hidden;
				box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
			}

			.table th,
			.table td {
				padding: 12px;
				vertical-align: middle;
			}

			.table th {
				background-color: #007bff;
				color: white;
				font-weight: 500;
			}

			.table tbody tr {
				transition: all 0.3s ease;
			}

			.table tbody tr:hover {
				background-color: #f1f1f1;
				transform: scale(1.02);
			}

			/* 分页样式 */
			.pagination .page-item .page-link {
				border-radius: 8px;
				margin: 0 2px;
				transition: all 0.3s ease;
			}

			.pagination .page-item .page-link:hover {
				background-color: #007bff;
				color: white;
				transform: translateY(-2px);
				box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
			}

			/* 动画效果 */
			@keyframes fadeIn {
				from {
					opacity: 0;
					transform: translateY(20px);
				}

				to {
					opacity: 1;
					transform: translateY(0);
				}
			}

			.fade-in {
				animation: fadeIn 0.5s ease-out;
			}
		</style>
	</head>

	<body>
		<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
			<div class="container">
				<a class="navbar-brand d-flex align-items-center" href="./ShouYe.html">
					<img src="../img/logo.png" alt="logo" width="40" height="40"
						class="d-inline-block align-text-top me-2">
					综合管理平台
				</a>
				<div class="d-flex">
					<button class="btn btn-light me-2" type="button">
						<img src="search-icon.png" alt="search" width="20" height="20">
					</button>
					<span class="navbar-text" id="">张三</span>
				</div>
			</div>
		</nav>

		<!-- 侧边栏 -->
		<div class="container-fluid">
			<div class="row">
				<!-- 主内容区域 -->
				<main class="col-md-10 col-lg-10 mx-auto custom-bg fade-in">
					<!-- 搜索和筛选区域 -->
					<div class="mb-4">
						<div class="row">
							<div class="col-md-3">
								<label for="workorderId" class="form-label">工单编号：</label>
								<input type="text" class="form-control" id="no" placeholder="请输入">
							</div>
							<div class="col-md-3">
								<label for="contactName" class="form-label">联系人：</label>
								<input type="text" class="form-control" id="lxrname" placeholder="请输入">
							</div>
							<div class="col-md-3">
								<label for="contactPhone" class="form-label">联系电话：</label>
								<input type="text" class="form-control" id="lxrphone" placeholder="请输入">
							</div>
						</div>
						<div class="row mt-3">
							<div class="col-md-3">
								<label for="repairPerson" class="form-label">维修人员：</label>
								<input type="text" class="form-control" id="wname" placeholder="请输入">
							</div>
							<div class="col-md-3">
								<label for="workorderStatus" class="form-label">工单状态：</label>
								<select class="form-select" id="state">
									<option value="">请选择</option>
									<option value="0">已完成</option>
									<option value="1">待派单</option>
									<option value="2">待支付</option>
									<option value="3">处理中</option>
									<option value="4">待审核</option>
									<option value="5">审核未通过</option>
									<option value="6">施工中</option>
									<option value="7">已取消</option>
								</select>
							</div>
							<div class="col-md-3">
								<button class="btn btn-light" id="x">筛选</button>
							</div>
						</div>
					</div>

					<!-- 工单列表区域 -->
					<table class="table table-bordered">
						<thead>
							<tr>
								<th>工单编号</th>
								<th>维修日期</th>
								<th>故障位置</th>
								<th>联系人</th>
								<th>联系电话</th>
								<th>故障描述</th>
								<th>故障图片</th>
								<th>维修人员</th>
								<th>备注</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody id="_tbody">
							<!-- 这里通过循环添加实际数据 -->
						</tbody>
					</table>

					<!-- 分页区域 -->
					<div class="pageInfo">
						<ul class="pagination d-flex align-items-center flex-wrap">
							<!-- 当前页/总页数 -->
							<li class="page-item disabled">
								<span class="page-link">
									<span id="p_no"></span>/<span id="p_count"></span>
								</span>
							</li>

							<!-- 首页 -->
							<li class="page-item">
								<a href="javascript:void(0);" id="first" class="page-link">首页</a>
							</li>

							<!-- 上一页 -->
							<li class="page-item">
								<a href="javascript:void(0);" id="prev" class="page-link">上一页</a>
							</li>

							<!-- 下一页 -->
							<li class="page-item">
								<a href="javascript:void(0);" id="next" class="page-link">下一页</a>
							</li>

							<!-- 尾页 -->
							<li class="page-item">
								<a href="javascript:void(0);" id="last" class="page-link">尾页</a>
							</li>

							<!-- 展示条数 -->
							<li class="page-item">
								<span class="page-link d-flex align-items-center">
									展示
									<select id="chooseSize" class="form-select form-select-sm ms-2"
										style="width: auto;">
										<option value="5">5</option>
										<option value="10" selected>10</option>
										<option value="20">20</option>
										<option value="50">50</option>
										<option value="100">100</option>
									</select>
									条
								</span>
							</li>

							<!-- 跳转到 -->
							<li class="page-item">
								<span class="page-link d-flex align-items-center">
									跳转到
									<input type="text" id="toPno" class="form-control form-control-sm ms-2"
										style="width: 60px;" />
									页
								</span>
							</li>

							<!-- 跳转按钮 -->
							<li class="page-item">
								<a href="javascript:void(0);" id="go" class="page-link">跳转</a>
							</li>

							<!-- 总条数 -->
							<li class="page-item disabled">
								<span class="page-link">
									总条数: <span id="zong"></span>条
								</span>
							</li>
						</ul>
					</div>
				</main>
			</div>
		</div>

		<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
		<script src="script.js"></script> <!-- 自定义js文件 -->
		<script src="../js/request/base.js"></script>
		<script src="../js/script/pc_index.js"></script>
	</body>

</html>